<style lang='scss' scoped>
@import "@css/style.scss";
.goods-list-page {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: $bgColor;
  display: flex;
  flex-direction: column;
  &-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
</style>
<template>
  <div class="goods-list-page">
    <navigation-bar
      @onLeftClick="onBackClick"
      :pageName="`商品列表`"
    >
    <template v-slot:nav-right>
      <img :src="layoutType.icon" alt="" @click="onChangeLayoutTypeClick()">
    </template>
    </navigation-bar>
    <div class="goods-list-page-content">
      <goods-options @optionsChange="onGoodsOptionsChange"></goods-options>
      <goods :layoutType="layoutType.type" :sort="sortType"></goods>
    </div>
  </div>
</template>
<script>
import NavigationBar from "../components/currency/NavigationBar.vue";
import Goods from "../components/goods/Goods.vue";
import GoodsOptions from "../components/goods/GoodsOptions.vue";
export default {
  name:'goodslist',
  components: { NavigationBar, GoodsOptions, Goods },
  data() {
    return {
      layoutTypeDatas:[
        {
          type:'1',
          icon:require('@img/list-type.svg')
        },
        {
          type:'2',
          icon:require('@img/grid-type.svg')
        },
        {
          type:'3',
          icon:require('@img/waterfall-type.svg')
        }
      ],
      layoutType:{},
      // goods排序规则
      sortType:'1'
    };
  },
  created () {
    this.layoutType=this.layoutTypeDatas[0];
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    //后退按钮点击事件
    onBackClick() {
      this.$router.go(-1);
    },
    onChangeLayoutTypeClick(){
      if(this.layoutType.type==1){
        this.layoutType=this.layoutTypeDatas[1];
      }else if(this.layoutType.type==2){
        this.layoutType=this.layoutTypeDatas[2];
      }else{
        this.layoutType=this.layoutTypeDatas[0];
      }
    },
    /**
     * 当赛选改变的时候被调用
     */
    onGoodsOptionsChange(sortType){
      this.sortType=sortType;
    }
  },
  computed: {},
};
</script>